<template>
  <div>
    时间:
    <a-date-picker></a-date-picker>
    <chart :option="chartOption" style="height: 500px; width: 100%" />
    <pre v-highlightjs="chartCode"><code class="html"></code></pre>
  </div>
</template>

<script>
import request from "../../utils/request";
import Chart from "../../components/Chart.vue";
import chartCode from "!!raw-loader!../../components/Chart";
// import random from "lodash/random";
// import axios from "axios";
export default {
  data() {
    return {
      chartOption: {},
      chartCode,
    };
  },
  components: { Chart },
  created() {},
  mounted() {
    this.getChartData();
    this.interval = setInterval(() => {
      this.getChartData();
      //模拟动态变化的数据
      // this.chartOption.series[0].data = this.chartOption.series[0].data.map(
      //   () => {
      //     return random(100);
      //   }
      // );
      //更改chartOption 使其变为一个新的值，避免子级使用wacth的深度监听，耗费性能
      // this.chartOption = { ...this.chartOption };
    }, 3000);
  },
  methods: {
    getChartData() {
      request({
        url: "/api/dashboard/chart",
        method: "get",
        params: {
          ID: 12345,
        },
      }).then((response) => {
        this.chartOption = {
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: response.data,
            },
          ],
        };
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
};
</script>

<style scoped lang="less">
</style>
